<template>
  <div class="card-area">
    <div class="top-area flx-row-bw-c" :style="{paddingLeft: `${padding}px`, paddingRight: `${padding}px`}">
      <h2 class="title">{{ title }}</h2>
      <div class="flx-row-s-c">
        <slot name="top-info"></slot>
        <a v-if="href" :href="href" class="more-button">更多</a>
      </div>
    </div>
    <slot name="main"></slot>
  </div>
</template>

<script>
export default {
  name: 'VipCard',
  props: {
    title: {
      type: String
    },
    padding: {
      default: 30
    },
    href: {
      default: ''
    }
  },
  data() {
    return {
      
    };
  },
  mounted() {
    
  },
  methods: {
    
  },
};
</script>

<style lang="scss" scoped>
.card-area {
  background-color: #fff;
  .top-area {
    height: 67px;
    border-bottom: 1px solid $border;
    text-align: left;
    .title {
      font-weight: 400;
      display: inline-block;
      font-size: 24px;
      line-height: 63px;
      color: rgba($color: #000000, $alpha: 0.8);
      border-bottom: 4px solid #F9521F;
    }
    .more-button {
      @include size(66px, 28px);
      @include btn-s(null, 28px, 4px);
      margin-left: 35px;
      color: rgba($color: #3D3D3D, $alpha: 0.9);
      border: rgba($color: #3D3D3D, $alpha: 0.2) solid 1px;
      transition: all .3s;

      &:hover {
        color: #FFFFFF;
        background-color: #F9521F;
        border-color: #F9521F;
      }
    }
  }
}
</style>